import { useEffect } from "react";
import storage from "./storage";

const useVisibilityChange = (
  type: string,
  callback: () => void,
  defs: React.DependencyList
) => {
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === "visible" && storage.get("", type)) {
        storage.remove("", type);
        callback();
      }
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, defs);
};

export default useVisibilityChange;
